<template>
    <div class="home">
        <el-container style="height: 100%;">
            <el-header>美食管理端</el-header>
            <el-container style="overflow: auto;">
                <el-aside style="max-width: 200px;min-width: 85px;width: auto;height:100%">
                    <el-menu :default-active="ActiveIndex" class="el-menu-vertical-demo" style="height:100%"
                        @select="handleSelect">
                        <el-menu-item v-for="(item, index) in MenuList" :key="index" :index="(index + 1) + ''">
                            <i :class="item.icon"></i>
                            <span slot="title">{{ item.name }}</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>

export default {
    name: "Home_Index",
    components: {
    },
    data() {
        return {
            ActiveIndex: "1",
            MenuList: [
                {
                    icon: "el-icon-user-solid",
                    name: "用户管理",
                    path: "/userManage"
                },
                {
                    icon: "el-icon-picture",
                    name: "文章管理",
                    path: "/Article"
                },
                {
                    icon: "el-icon-s-shop",
                    name: "订单管理",
                    path:"/Order"
                },
                {
                    icon: "el-icon-s-platform",
                    name: "广告管理",
                    path: "/Advertisement"
                },
                {
                    icon: "el-icon-s-ticket",
                    name: "优惠券管理",
                    path: "/Coupon"
                },
                {
                    icon: "el-icon-s-comment",
                    name: "意见管理",
                    path: "/Opinion"
                },
                {
                    icon: "el-icon-s-grid",
                    name: "美食管理",
                    path: "/Goods"
                }
            ]
        }
    },
    methods: {
        handleSelect(index) {
            console.log(index);
            this.$router.push(this.MenuList[index - 1].path);
            this.ActiveIndex = index
        }
    },
}

</script>

<style lang="less" scoped>
.home {
    width: 100%;
    height: 100%;

    .el-header {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
    }
}

/deep/ .el-pagination {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
@media screen and (max-width: 550px) {
    /deep/ .el-dialog {
        width: 90% !important;
    }
}
</style>